<!DOCTYPE html>
<html lang="en" > 
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>在线预约保养系统</title>

<link rel="stylesheet" href="css/split-pane.css" />
<link rel="stylesheet" type="text/css" href="lib/bootstrap/dist/css/bootstrap.css">

<style type="text/css">
html, body {
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}
/* The styling bolow is very simple. You can style things your own way. */
body {
    box-sizing: border-box;
    background: #fff;
    padding: 1px;
}
.split-pane-divider {
    background: #eee;
}
.split-pane-component {
    background: #fff; 
}
.data-split-pane-component{   
    overflow:hidden;
}
</style>
</head>

<body data-ng-app="OrderlistApp" ng-cloak class="ng-cloak"> 
<div data-split-pane>
    <div data-split-pane-component  data-height="90px">
        <div class="pretty-split-pane-component-inner"><div >
                <div class="spacer" style="width:10px;height:20px"></div>
                <h1>在线预约保养系统</h1>
            </div>
        </div>
    </div>
    <div data-split-pane-divider data-height="1px"></div>
    <div data-split-pane-component > 
        <div data-split-pane> 
            <div data-split-pane-component >
                <h3>订单列表</h3>
                <div ng-controller="orderlist">
                    <table class="table">
                        <thead> 
                            <th>订单编号</th>
                            <th>时间</th>
                            <th>4S店</th>
                            <th>汽车型号</th>
                            <th>用户</th>
                            <th>状态</th>
                        </thead>
                        <tbody>
                        <tr ng-repeat="x in orders">

                            <td>{{x.orderTime}}</td>
                            <td>{{x.storeId}}</td>
                            <td>{{x.carID}}</td>
                            <td>{{x.userId}}</td> 
                            <td>{{x.strOrderId}}</td>
                            <td>{{x.strOrderTime}}</td>
                            <td>{{x.storeName}}</td>
                            <td>{{x.factoryId}}{{x.carName}}</td>
                            <td>{{x.userName}}</td>
                            <td><a class="btn btn-pay" ng-disabled="x.status=='已支付'" ng-click="pay(x)">{{x.status}}</a></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

<div data-split-pane-divider data-width="1px"></div>
            <div data-split-pane-component data-height="40px" >
                <button type="button" class="btn btn-primary " onclick="returnToMap()" style="width:160px;height:40px;float:right" >返回</button>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/split-pane.js"></script>
<script src="js/angular-split-pane.js"></script>
<script src="js/app.js"></script>

<script>
angular.module('OrderlistApp', ['shagstrom.angular-split-pane']).controller('orderlist', function($scope,$http) {
        console.log("get orderlist...");
        var userid=localStorage.getItem("userId");
        $http.get("/orderserver/ordersbyuser?UserId="+userid).then(function(response){
            $scope.orders=response.data;
        });
        $scope.pay=function(x){
            console.log("待支付："+x.strOrderId);
        $http.post("/orderserver/paybyorderid?orderId="+x.strOrderId).then(function(response){
            alert("订单："+x.strOrderId+" 已支付!");
            x.status='已支付';
        });
        }
    });
</script>
</body>
</html>
